<template>
  <div>
    <div class="upload">
      <span ></span>
      <Upload
       :before-upload="handleUpload"
        multiple
        type="drag"
        action="//jsonplaceholder.typicode.com/posts/"
      >
        <div style="padding: 20px 0">
          <Icon type="ios-cloud-upload" size="52" style="color: #3399ff"></Icon>
          <p v-if="file !== null"> file Name: {{ file.name }} file Size:{{fileSize(file.size)}}</p>
          <p v-else>Click or drag files here to upload</p>
        </div>
      </Upload>
      <Button type="primary" @click="upload" :loading="loadingStatus" class="btn">{{ loadingStatus ? '上传中' : '点击上传' }}</Button>
    </div>
    <!-- <div class="img">
      <img :src="baseUrl"  v-if="baseUrl" />
    </div> -->
  </div>
</template>
<script>
import axios  from '@/request/server';
import { client ,getFileNameUUID}  from '@/hooks/ALI_OSSCloud'
import { compress , getfilesize} from '@/hooks/tools'
export default {
  data() {
    return {
      file: null,
      loadingStatus: false,
      baseUrl:"",
      zipUrl:"",
      Imageurl:""
    };
  },
  mounted() {},
  methods: {
    handleUpload (file) {
      this.file = file;
      let reader = new FileReader();
      reader.readAsDataURL(this.file) //读取文件并将文件以URL的形式保存在resulr属性中 base64格式
      // 图片预览
      reader.onload = (e) => {
          console.log("result",e.target.result)
          this.baseUrl = e.target.result
          let image = new Image()
          image.src = this.baseUrl // 设置image的地址为base64的地址
          image.onload = () => { // 图片加载完成后才能进行压缩处理，从而转换为base64 进行赋值
          let width = image.width // 图片宽度
          let height = image.height
          this.zipUrl = compress(image, width, height, 0.7)
      }
    }
    return false;
  },
    // 手动上传 
  async upload(){
       this.loadingStatus = true 
       const formData = new FormData();
       formData.set('file', this.file);
       console.log('file',this.file)
       const headerConfig = {Headers:{'Content-Type':'multipart/form-data'}}
       console.log(this.file.name,this.file)
       let fileName = 'image/'+'banner' + `${Date.parse(new Date())}` + '.jpg'; 
       /** User Alicloud 上传 */
       client().multipartUpload(fileName,this.file,{
        progress:function(per,cpt){
          console.log("进度",per)
        } 
       }).then((res)=>{
          console.log(res)
          this.Imageurl = 'https://kai-zhang.oss-cn-hangzhou.aliyuncs.com/' + fileName;
          console.log(this.Imageurl)
        })
      
      /** 
       * 
       *axios.post('/fileUpload',formData,headerConfig).then( res => {
        this.$Message.success("图片上传成功")
        this.loadingStatus = false
        this.file = null
        }).catch(err=>{
        console.log(err);
       })
       */

    },
    // 大小
    fileSize(val){
      return getfilesize (val)
    }

  },
};
</script>
<style scoped>
.upload {
  width: 500px;
  height: 300px;
  text-align: center;
}
.btn {
  width: 200px !important;
  margin-top: 20px;
}
.img {
   max-width: 500px;
   max-height: 300px;
}
</style>
